import { Badge, TabBar } from "antd-mobile";
import React, { useEffect, useState } from "react";
import {
  AppOutline,
  MessageOutline,
  MessageFill,
  UnorderedListOutline,
  UserOutline,
} from "antd-mobile-icons";
import styles from "./index.module.scss";
import { useLocation, useNavigate } from "react-router-dom";

type Props = {};

export default function index({}: Props) {
  const tabs = [
    {
      key: "home",
      title: "首页",
      icon: <AppOutline />,
      badge: Badge.dot,
      path: "/",
    },

    {
      key: "questions",
      title: "快速刷题",
      icon: (active: boolean) =>
        active ? <MessageFill /> : <MessageOutline />,
      path: "/questions",
    },
    {
      key: "user",
      title: "我的",
      icon: <UserOutline />,
      path: "/user",
    },
  ];
  const navigate = useNavigate();
  const location = useLocation();
  const [activeKey, setActiveKey] = useState("home");
  const changeBar = (e: string) => {
    setActiveKey(e);
    let index = tabs.findIndex((item) => item.key === e);
    navigate(tabs[index].path);
  };
  const [isShow, setIsShow] = useState(false);
  useEffect(() => {
    let index = tabs.findIndex((item) => item.path == location.pathname);

    if (index == -1) {
      setIsShow(true);
    } else {
      setIsShow(false);
    }
  }, [location.pathname]);
  return (
    <div className={styles.yt_tabbar}>
      <TabBar
        style={{ display: isShow ? "none" : "block" }}
        onChange={(e) => {
          changeBar(e);
        }}
      >
        {tabs.map((item) => (
          <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
        ))}
      </TabBar>
    </div>
  );
}
